<template>
  <div class="mask" v-if="showDialog">
    <div class="dialog" style="width:1300px;">
      <div class="dialog-header">
        <div class="title pos-left">{{dialogTitle}}</div>
        <ul class="tools pos-right">
          <li class="item">
            <button class="btn" type="button" @click="closeDialog">
              <i class="icon icon-close"></i>
            </button>
          </li>
        </ul>
      </div>
      <div class="dialog-body scroll" style="background:#081526;">
        <div class="col xs-8">
          <div class="box">
            <div class="box-header">
              <span class="title pos-left">监管单位信息</span>
            </div>
            <div class="box-body">
              <div class="abs">
                <h1>{{basicData.MC}}</h1>
                <h2>所处位置：{{basicData.SSQH}}</h2>
                <h2>该单位消防安全负责人：{{basicData.AQFZR || '暂无记录'}}，联系电话：{{basicData.PHONE || '暂无记录'}}</h2>
              </div>
              <div class="tip">
                <p>安全评估得分满分100分，每产生一次用电告警、用水告警、巡查隐患以及报警主机的告警均扣1分。最低分不低于0分。安全评估得分越高，表示该部位隐患越少，相对越安全。</p>
              </div>
              <ul class="towerlist">
                <li class="item">
                  <div class="title">安全评估得分</div>
                  <div class="subtitle num fg-cyan" :class="scoreColor">{{score}}</div>
                </li>
                <li class="item">
                  <div class="title">用电告警次数</div>
                  <div class="subtitle num fg-orange">{{YDCount}}</div>
                </li>
                <li class="item">
                  <div class="title">用水告警次数</div>
                  <div class="subtitle num fg-orange">{{YSCount}}</div>
                </li>
                <li class="item">
                  <div class="title">巡查隐患次数</div>
                  <div class="subtitle num fg-orange">{{YHCount}}</div>
                </li>
                <li class="item">
                  <div class="title">报警主机告警</div>
                  <div class="subtitle num fg-orange">{{BJCount}}</div>
                </li>
              </ul>
               <x-loading ref="loadingBasic" :show="showLoadingBasic"></x-loading>
            </div>
          </div>
        </div>
        <div class="col xs-4">
          <div class="box">
            <div class="box-header">
              <span class="title pos-left">气象情况</span>
            </div>
            <div class="box-body scroll heightlmt">
              <div class="tip">气象数据更新于{{weather.updateInfo}}</div>
              <div class="form">
                <div class="form-item">
                  <div class="label">当天环境气温</div>
                  <div class="field">{{weather.tmp}}</div>
                </div>
                <div class="form-item">
                  <div class="label">当天风力情况</div>
                  <div class="field">{{weather.wind_sc}}</div>
                </div>
                <div class="form-item">
                  <div class="label">当天空气湿度</div>
                  <div class="field">{{weather.hum}}</div>
                </div>
                <div class="form-item">
                  <div class="label">当天PM2.5数值</div>
                  <div class="field">{{weather.PMMin}}</div>
                </div>
                <div class="form-item">
                  <div class="label">当天PM10数值</div>
                  <div class="field">{{weather.PMMax}}</div>
                </div>
              </div>
              <x-loading ref="loadingWeather" :show="showLoadingWeather"></x-loading>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="box">
            <div class="box-header">
              <span class="title pos-left">部位用电告警记录</span>
            </div>
            <div class="box-body flex">
              <div class="box-body scroll heightlmt flex-left">
                <table class="dtable">
                  <thead>
                    <tr>
                      <td>序号</td>
                      <td>隐患内容</td>
                      <td>隐患发现时间</td>
                      <td>隐患处理状态</td>
                    </tr>
                  </thead>
                  <tbody v-if="listYD.length>0">
                    <tr v-for="(item, index) in listYD" :key="index">
                      <td>{{index+1}}</td>
                      <td>
                        <div
                          :title="item.AlarmType+'-'+item.QTexts"
                        >{{item.AlarmType+'-'+item.QTexts}}</div>
                      </td>
                      <td>
                        <div :title="item.AlarmTime">{{item.AlarmTime}}</div>
                      </td>
                      <td>
                        <div :title="item.Status">{{item.Status}}</div>
                      </td>
                    </tr>
                  </tbody>
                  <tbody v-else>
                    <tr>
                      <td colspan="4">暂无告警内容</td>
                    </tr>
                  </tbody>
                </table>
                <x-loading ref="loadingYD" :show="showLoadingYD"></x-loading>
              </div>
              <div class="box-body flex-right">
                <div class="chart" id="chart-dlg-electric"></div>
              </div>
            </div>
          </div>
          <div class="box">
            <div class="box-header">
              <span class="title pos-left">部位用水告警记录</span>
            </div>
            <div class="box-body flex">
              <div class="box-body scroll heightlmt flex-left">
                <table class="dtable">
                  <thead>
                    <tr>
                      <td>序号</td>
                      <td>隐患内容</td>
                      <td>隐患发现时间</td>
                      <td>隐患处理状态</td>
                    </tr>
                  </thead>
                  <tbody v-if="listYS.length>0">
                    <tr v-for="(item, index) in listYS" :key="index">
                      <td>{{index+1}}</td>
                      <td>
                        <div
                          :title="item.AlarmType + '-'+item.QTexts"
                        >{{item.AlarmType + '-'+item.QTexts}}</div>
                      </td>
                      <td>
                        <div :title="item.AlarmTime">{{item.AlarmTime}}</div>
                      </td>
                      <td>
                        <div :title="item.Status">{{item.Status}}</div>
                      </td>
                    </tr>
                  </tbody>
                  <tbody v-else>
                    <tr>
                      <td colspan="4">暂无告警内容</td>
                    </tr>
                  </tbody>
                </table>
                <x-loading ref="loadingYS" v-if="showLoadingYS"></x-loading>
              </div>
              <div class="box-body flex-right">
                <div class="chart" id="chart-dlg-water"></div>
              </div>
            </div>
          </div>
          <div class="box">
            <div class="box-header">
              <span class="title pos-left">人工上报消防隐患记录</span>
            </div>
            <div class="box-body scroll heightlmt">
              <table class="dtable">
                <thead>
                  <tr>
                    <td>序号</td>
                    <td>隐患内容</td>
                    <td>隐患发现时间</td>
                    <td>隐患处理状态</td>
                  </tr>
                </thead>
                <tbody v-if="listYH.length>0">
                  <tr v-for="(item, index) in listYH" :key="index">
                    <td>{{index+1}}</td>
                    <td>
                      <div
                        :title="item.detail == ''?'暂无详情':item.detail"
                      >{{item.detail == ''?'暂无详情':item.detail}}</div>
                    </td>
                    <td>
                      <div :title="item.time">{{item.time}}</div>
                    </td>
                    <td>
                      <div :title="item.status">{{item.status}}</div>
                    </td>
                  </tr>
                </tbody>
                <tbody v-else>
                  <tr>
                    <td colspan="4">暂无告警内容</td>
                  </tr>
                </tbody>
              </table>
              <x-loading ref="loadingYH" v-if="showLoadingYH"></x-loading>
            </div>
          </div>
          <div class="box">
            <div class="box-header">
              <span class="title pos-left">报警主机告警记录</span>
            </div>
            <div class="box-body scroll heightlmt">
              <table class="dtable">
                <thead>
                  <tr>
                    <td>序号</td>
                    <td>隐患内容</td>
                    <td>隐患发现时间</td>
                    <td>隐患处理状态</td>
                  </tr>
                </thead>
                <tbody v-if="listBJ.length>0">
                  <tr v-for="(item, index) in listBJ" :key="index">
                    <td>{{index+1}}</td>
                    <td>
                      <div
                        :title="item.detail == ''?'暂无详情':item.detail"
                      >{{item.detail == ''?'暂无详情':item.detail}}</div>
                    </td>
                    <td>
                      <div :title="item.time">{{item.time}}</div>
                    </td>
                    <td>
                      <div :title="item.status">{{item.status}}</div>
                    </td>
                  </tr>
                </tbody>
                <tbody v-else>
                  <tr>
                    <td colspan="4">暂无告警内容</td>
                  </tr>
                </tbody>
              </table>
              <x-loading ref="loadingBJ" v-if="showLoadingBJ"></x-loading>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped>
.box-body.flex {
  display: flex;
}

.flex .flex-left {
  flex-grow: 1;
  order: 0;
}

.flex .flex-right {
  width:330px;
  flex-grow: 0;
  order: 1;
  border-left:1px #365ac7 solid;
}
.tip {
    background: #ffffff20;
    color: #fff;
    padding: 12px;
}

.tip p {
    line-height: 24px;
}
.form-item {
    padding: 14px 0;
}
.abs {
    padding: 29px 25px 14px 25px;
}
</style>
<script>
import Loading from "@/components/Loading";
import axios from "axios";

export default {
  data() {
    return {
      basicData: {
        MC: null,
        SSQH: null,
        AQFZR: null,
        PHONE: null
      },
      weather: {
        tmp: 0,
        wind_sc: 0,
        hum: 0,
        PMMin: 0,
        PMMax: 0,
        updateInfo:null
      },
      score: 0,
      scoreColor: "",
      dialogTitle: "监管部位安全评估详情",
      showDialog: false,
      showLoadingBasic: false,
      showLoadingYD: false,
      showLoadingYS: false,
      showLoadingYH: false,
      showLoadingBJ: false,
      showLoadingWeather: false,
      YDCount: 0,
      YSCount: 0,
      YHCount: 0,
      BJCount: 0,
      listYD: [],
      listYS: [],
      listYH: [],
      listBJ: [],
      comId: !this.take ? null : this.take.comId,
      name: !this.take ? null : this.take.comName,
      rawData:null
    };
  },
  watch: {
    take(n, o) {
      this.comId = n.comId;
      this.comName = n.comName;
      this.score = n.score;
      this.showDialog = true;
      this.listYD = [];
      this.listYS = [];
      this.listYH = [];
      this.listBJ = [];
      this.query();
    },
    show(n, o) {
      this.showDialog = n;
    }
  },
  components: {
    "x-loading": Loading
  },
  props: {
    take: Object,
    show: Boolean
  },
  methods: {
    query(val) {
      this.comId = val ? val.comId : this.comId;
      this.comName = val ? val.comName : this.comName;
      this.score = val ? val.score : this.score;
      if (val == undefined) {
        this.date = this.date;
      } else {
        this.date = this.$parent.date;
      }
      let params = {
        comId: this.comId,
        startTime: this.date + " 00:00:00",
        endTime: this.date + " 23:59:59"
      };
      this.showDialog = true;
      this.listYD = [];
      this.listYS = [];
      this.listYH = [];
      this.listBJ = [];
      this.showLoadingBasic = true;
      //赋值基础信息
      axios
        .get(this.URLHEAD + "ICoordinatDetailse", {
          params: {
            ComID: this.comId
          }
        })
        .then(res => {
          let json = res.data;
          this.basicData.MC = json.Data[0].MC;
          this.basicData.SSQH = json.Data[0].AreaMC;
          this.basicData.AQFZR = json.Data[0].FireDuty;
          this.basicData.PHONE = json.Data[0].FireDutyTel;
          this.showLoadingBasic = false;
          this.getWeatherData();
        });

      this.getYDAlarms();
      this.getYSAlarms();
      this.getYHAlarms();
      this.getBJAlarms();
    },
    getWeatherData() {
      let now = new Date()
      let nowtime = ` ${now.getHours()}:${now.getMinutes()}:${now.getSeconds()}`
      let params = {
        countyName: this.basicData.SSQH,
        date: this.$parent.date
      };
      this.showLoadingWeather = true;
      axios
        .get(this.URLHEAD_TA + "QueryWeather", {
          params: params
        })
        .then(res => {
          let json = res.data;
          this.weather.updateInfo = json.Data[0].loc;
          this.weather.tmp = `${json.Data[0].tmp}°C`
          this.weather.wind_sc = `${json.Data[0].wind_dir}${json.Data[0].wind_sc}级`
          this.weather.hum = `${json.Data[0].hum}%`
          this.weather.PMMin = json.Data[0].PM25
          this.weather.PMMax = json.Data[0].PM10
          this.showLoadingWeather = false;
        });
    },
    getYDAlarms() {
      //用电告警
      let params = {
        ComID: this.comId,
        startTime: this.date + " 00:00:00",
        endTime: this.date + " 23:59:59",
        type: "用电发生异常"
      };
      this.showLoadingYD = true;
      axios
        .get(this.URLHEAD + "IReportAnalysis", {
          params: params
        })
        .then(res => {
          let json = res.data;
          let chartData = [];
          //绑定表格
          if (
            json.Data[0].data !== undefined &&
            json.Data[0].data instanceof Array
          ) {
            this.showLoadingYD = false;
            this.YDCount = json.Data[0].data.length;
            this.listYD = json.Data[0].data;
          } else {
            throw "IReportAnalysis接口返回的json.Data中没有包含data的键或它的值不是一个数组";
          }
          //绑定Echarts
          if (
            json.Data[0].data !== undefined &&
            json.Data[0].data instanceof Array
          ) {
            if (json.Data[0].data.length > 0) {
              chartData = json.Data.splice(1, 4);
            } else {
              chartData = [{ name: "用电告警", value: 0 }];
            }
          } else {
            throw "IReportAnalysis接口返回的json.Data中没有包含data的键或它的值不是一个数组";
          }
          
          var option = {
            tooltip: {
              show: true,
              trigger: "item",
              formatter: "{b}:{c}({d}%)"
            },
            legend: {
              orient: "vertical",
              left: "left",
              textStyle: { fontSize: 12, color: "#fff" },
              data: chartData.map(o => {
                return o.name;
              })
            },
            color: this.COLORS,
            series: [
              {
                name: "告警分类",
                type: "pie",
                radius: "55%",
                roseType:'area',
                center: ["50%", "60%"],
                data: chartData,
                itemStyle: {
                  normal: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: "rgba(0, 0, 0, 0.5)"
                  }
                },
                label: {
                  normal: {
                    show: true,
                    fontSize: 12,
                    formatter: "{b}\n{c}:({d}%)",
                    position: "outside"
                  }
                }
              }
            ]
          };
          this.$Crender("chart-dlg-electric", option);
        });
    },
    getYSAlarms() {
      //用水告警
      let params = {
        ComID: this.comId,
        startTime: this.date + " 00:00:00",
        endTime: this.date + " 23:59:59",
        type: "用水发生异常"
      };
      this.showLoadingYS = true;
      axios
        .get(this.URLHEAD + "IReportAnalysis", {
          params: params
        })
        .then(res => {
          let json = res.data;
          let chartData = [];
          //绑定表格
          if (
            json.Data[0].data !== undefined &&
            json.Data[0].data instanceof Array
          ) {
            this.showLoadingYS = false;
            this.YSCount = json.Data[0].data.length;
            this.listYS = json.Data[0].data;
          } else {
            throw "IReportAnalysis接口返回的json.Data中没有包含data的键或它的值不是一个数组";
          }
          //绑定Echarts
          if (
            json.Data[0] !== undefined &&
            json.Data instanceof Array
          ) {
            if (json.Data.length > 0) {
              chartData = json.Data.splice(1, 4);
            } else {
              chartData = [{ name: "用水告警", value: 0 }];
            }
          } else {
            throw "IReportAnalysis接口返回的json.Data中没有包含data的键或它的值不是一个数组";
          }
          var option = {
            tooltip: {
              show: true,
              trigger: "item",
              formatter: "{b}:{c}({d}%)"
            },
            legend: {
              orient: "vertical",
              left: "left",
              textStyle: { fontSize: 12, color: "#fff" },
              data: chartData.map(o => {
                return o.name;
              })
            },
            color: this.COLORS,
            series: [
              {
                name: "告警分类",
                type: "pie",
                roseType:'area',
                radius: "55%",
                center: ["50%", "60%"],
                data: chartData,
                itemStyle: {
                  normal: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: "rgba(0, 0, 0, 0.5)"
                  }
                },
                label: {
                  normal: {
                    show: true,
                    fontSize: 12,
                    formatter: "{b}\n{c}:({d}%)",
                    position: "outside"
                  }
                }
              }
            ]
          };
          this.$Crender("chart-dlg-water", option);
        });
    },
    getYHAlarms() {
      let params = {
        mc: this.comName,
        type: "隐患巡查",
        indexDate: this.$parent.date
      };
      this.showLoadingYH = true;
      axios
        .get(this.URLHEAD + "GetGJDetaileNew", {
          params: params
        })
        .then(res => {
          let data = res.data;
          this.listYH = data.Data.gj;
          this.YHCount = this.listYH.length;
          this.showLoadingYH = false;
        });
    },
    getBJAlarms() {
      let params = {
        mc: this.comName,
        type: "报警主机",
        indexDate: this.$parent.date
      };
      this.showLoadingBJ = true;
      axios
        .get(this.URLHEAD + "GetGJDetaileNew", {
          params: params
        })
        .then(res => {
          let data = res.data;
          this.listBJ = data.Data.gj;
          this.BJCount = this.listBJ.length;
          this.showLoadingBJ = false;
        });
    },
    closeDialog() {
      //this.reset();
      this.showDialog = false;
    }
  }
};
</script>